<template>
  <div class="home">
    <!-- 轮播图 -->
    <div>
      <HomeBand :carousels="carousels"></HomeBand>
      <div class="commodities">
        <!-- 商品类型 -->
        <el-row>
          <el-col style="margin-bottom: 20px;">
            <el-divider></el-divider>
            <div style="margin: 0 20px;">
              <el-button
                size="small"
                v-for="(item, index) in types"
                :key="index"
                :type="item.buttonType"
                @click="typeSelected(index)"
              >
                {{ item.goods_TypeName }}
              </el-button>
            </div>
          </el-col>
        </el-row>
        <!-- 该商品类型下的所有商品 -->
        <ul class="goodslist">
          <li class="li" v-for="item in commodities" :key="item.gid">
            <router-link :to="{ name: 'introduce', query: { commodityId: item.gid } }" class="card">
              <el-card :body-style="{ padding: '20px' }" shadow="hover">
                <img :src="item.pthumbnail" style="width: 200px;height:200px" />
                <div style="padding: 14px;">
                  <span>{{ item.gname }}</span>
                </div>
                <div style="padding: 0 14px;">
                  <span class="newPrice">￥{{ item.gprice }}</span>
                  <span class="oldPrice">￥{{ item.gprice }}</span>
                  <span class="commentCount">评价 {{ item.commentCount }}</span>
                </div>
              </el-card>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getGoodsList } from '@/api/goods.js'
import HomeBand from './home/homeband.vue'
export default {
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      query: '',
      carousels: [],
      // 商品数组
      commodities: [],
      types: [
        {
          buttonType: 'primary',
          goods_TypeName: '全部类型'
        }
      ]
    }
  },
  components: {
    HomeBand
  },
  computed: {
    path: function() {
      return this.$route.path
    }
  },
  methods: {
    async getGoodsList() {
      const res = await getGoodsList()
      const data = res.data.data
      data.forEach(element => {
        const num = Math.round(Math.random() * 10000)
        this.commodities.push({ ...element, commentCount: num })
      })
      // 轮播图
      for (let i = 0; i < 5; i++) {
        if (i == data.length) {
          break
        }
        this.carousels.push(data[i])
      }
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    onSearch() {
      var that = this

      this.$axios
        .get('/goods/searchGoods', {
          params: {
            keyword: this.form.query
          }
        })
        .then(function(response) {
          //let search_name = document.getElementById("serch_good").value;
          //alert(search_name);

          that.commodities = []
          console.log('搜索的商品列表为: ')
          var data = response.data.data
          console.log(data)
          //console.log(data);
          let temp = []
          for (let i = 0; i < data.length; i++) {
            // 4个商品一行
            if (temp.length == 4) {
              that.commodities.push(temp)
              temp = []
            }
            //console.log(this.form.query);
            //修改变量名
            data[i].name = data[i].gname
            data[i].goods_OldPrice = data[i].gprice
            data[i].goods_NewPrice = data[i].gprice
            //data[i].pthumbnail = "http://202.193.52.12:8080/"+data[i].pthumbnail;
            temp.push(data[i])
          }
          that.commodities.push(temp)
        })
        .catch(function(error) {
          alert(' 出错了 ! ')
          console.log(error)
        })
    },

    typeSelected(index) {
      var that = this
      // 点击全部类型
      if (index == 0) {
        for (let i = 0; i < this.types.length; i++) {
          this.types[i].buttonType = 'text'
        }
        this.types[index].buttonType = 'primary'
        this.$axios
          .get('/goods/selectAllGoods')
          .then(function(response) {
            that.commodities = []

            console.log('选择的商品列表为: ')
            var data = response.data.data
            console.log(data)

            //console.log(data);
            let temp = []
            for (let i = 0; i < data.length; i++) {
              if (temp.length == 4) {
                that.commodities.push(temp)
                temp = []
              }
              //修改变量名
              data[i].name = data[i].gname
              data[i].goods_OldPrice = data[i].gprice
              data[i].goods_NewPrice = data[i].gprice
              //data[i].pthumbnail = "http://202.193.52.12:8080/"+data[i].pthumbnail;
              temp.push(data[i])
            }
            that.commodities.push(temp)
          })
          .catch(function(error) {
            console.log(error)
          })
      }
      // 点击相应商品类型
      else if (index == 1) {
        for (let i = 0; i < this.types.length; i++) {
          this.types[i].buttonType = 'text'
        }
        this.types[index].buttonType = 'primary'

        this.$axios
          .get('/goods/selectAllGoods')
          .then(function(response) {
            that.commodities = []

            console.log('选择的商品列表为: ')
            var data = response.data.data
            console.log(data)

            //console.log(data);
            let temp = []
            for (let i = 0; i < data.length; i++) {
              if (temp.length == 4) {
                that.commodities.push(temp)
                temp = []
              }
              let price = data[i].gprice
              console.log(price)

              if (price >= 0 && price < 500) {
                //修改变量名
                data[i].name = data[i].gname
                data[i].goods_OldPrice = data[i].gprice
                data[i].goods_NewPrice = data[i].gprice
                //data[i].pthumbnail = "http://202.193.52.12:8080/"+data[i].pthumbnail;
                temp.push(data[i])
              }
            }
            that.commodities.push(temp)
          })
          .catch(function(error) {
            console.log(error)
          })
      } else if (index == 2) {
        for (let i = 0; i < this.types.length; i++) {
          this.types[i].buttonType = 'text'
        }
        this.types[index].buttonType = 'primary'

        this.$axios
          .get('/goods/selectAllGoods')
          .then(function(response) {
            that.commodities = []

            console.log('选择的商品列表为: ')
            var data = response.data.data
            console.log(data)

            //console.log(data);
            let temp = []
            for (let i = 0; i < data.length; i++) {
              if (temp.length == 4) {
                that.commodities.push(temp)
                temp = []
              }
              let price = data[i].gprice
              //console.log( price );

              if (price >= 500 && price < 1000) {
                //修改变量名
                data[i].name = data[i].gname
                data[i].goods_OldPrice = data[i].gprice
                data[i].goods_NewPrice = data[i].gprice
                //data[i].pthumbnail = "http://202.193.52.12:8080/"+data[i].pthumbnail;
                temp.push(data[i])
              }
            }
            that.commodities.push(temp)
          })
          .catch(function(error) {
            console.log(error)
          })
      } else if (index == 3) {
        for (let i = 0; i < this.types.length; i++) {
          this.types[i].buttonType = 'text'
        }
        this.types[index].buttonType = 'primary'

        this.$axios
          .get('/goods/selectAllGoods')
          .then(function(response) {
            that.commodities = []

            console.log('选择的商品列表为: ')
            var data = response.data.data
            console.log(data)

            //console.log(data);
            let temp = []
            for (let i = 0; i < data.length; i++) {
              if (temp.length == 4) {
                that.commodities.push(temp)
                temp = []
              }
              let price = data[i].gprice
              //console.log( price );

              if (price >= 1000 && price < 2000) {
                //修改变量名
                data[i].name = data[i].gname
                data[i].goods_OldPrice = data[i].gprice
                data[i].goods_NewPrice = data[i].gprice
                //data[i].pthumbnail = "http://202.193.52.12:8080/"+data[i].pthumbnail;
                temp.push(data[i])
              }
            }
            that.commodities.push(temp)
          })
          .catch(function(error) {
            console.log(error)
          })
      } else if (index == 4) {
        for (let i = 0; i < this.types.length; i++) {
          this.types[i].buttonType = 'text'
        }
        this.types[index].buttonType = 'primary'

        this.$axios
          .get('/goods/selectAllGoods')
          .then(function(response) {
            that.commodities = []

            console.log('选择的商品列表为: ')
            var data = response.data.data
            console.log(data)

            //console.log(data);
            let temp = []
            for (let i = 0; i < data.length; i++) {
              if (temp.length == 4) {
                that.commodities.push(temp)
                temp = []
              }
              let price = data[i].gprice
              //console.log( price );

              if (price >= 2000 && price < 4000) {
                //修改变量名
                data[i].name = data[i].gname
                data[i].goods_OldPrice = data[i].gprice
                data[i].goods_NewPrice = data[i].gprice
                //data[i].pthumbnail = "http://202.193.52.12:8080/"+data[i].pthumbnail;
                temp.push(data[i])
              }
            }
            that.commodities.push(temp)
          })
          .catch(function(error) {
            console.log(error)
          })
      } else if (index == 5) {
        for (let i = 0; i < this.types.length; i++) {
          this.types[i].buttonType = 'text'
        }
        this.types[index].buttonType = 'primary'

        this.$axios
          .get('/goods/selectAllGoods')
          .then(function(response) {
            that.commodities = []

            console.log('选择的商品列表为: ')
            var data = response.data.data
            console.log(data)

            //console.log(data);
            let temp = []
            for (let i = 0; i < data.length; i++) {
              if (temp.length == 4) {
                that.commodities.push(temp)
                temp = []
              }
              let price = data[i].gprice
              //console.log( price );

              if (price >= 4000) {
                //修改变量名
                data[i].name = data[i].gname
                data[i].goods_OldPrice = data[i].gprice
                data[i].goods_NewPrice = data[i].gprice
                //data[i].pthumbnail = "http://202.193.52.12:8080/"+data[i].pthumbnail;
                temp.push(data[i])
              }
            }
            that.commodities.push(temp)
          })
          .catch(function(error) {
            console.log(error)
          })
      }
    }
  },
  // 获取数据
  created() {
    this.getGoodsList()
    var that = this
    let type = [
      {
        buttonType: 'text',
        goods_TypeName: '0~500'
      },
      {
        buttonType: 'text',
        goods_TypeName: '500~1000'
      },
      {
        buttonType: 'text',
        goods_TypeName: '1000~2000'
      },
      {
        buttonType: 'text',
        goods_TypeName: '2000~4000'
      },
      {
        buttonType: 'text',
        goods_TypeName: '4000+'
      }
    ]
    for (let i = 0; i < type.length; i++) {
      that.types.push(type[i])
    }
  }
}
</script>

<style scoped lang="less">

.goodslist {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  .li {
    margin: 5px;
    list-style: none;
    width: 288px;
    flex: none;
  }
}
.routerdiv {
  width: 1200px;
  margin: 0 auto;
}
.imge {
  margin-top: 20px;
}
.grid-content {
  padding-top: 39px;
}
.grid-right {
  display: flex;
  padding-top: 39px;
  padding-left: 50px;
}
.elrow {
  background-color: #fff;
  margin-bottom: 20px;
  height: 100px;
  border-bottom: 1px solid #eee;
}
.form {
  text-align: center;
}

.input {
  width: 500px;
}

.carousel img {
  width: 400px;
  height: 400px;
  /* 缩放 */
  object-fit: contain;
}

.commodities img {
  display: block;
  margin: 0 auto;
}

.card {
  text-decoration: none;
}

.newPrice {
  color: #f56c6c;
  font-size: 24px;
}

.oldPrice {
  color: #909399;
  text-decoration: line-through;
}

.commentCount {
  float: right;
  margin-top: 10px;
  color: #909399;
  font-size: 13px;
}

.el-button--text {
  color: black;
}
</style>
